<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>管理员登录</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3B82F6',
                        secondary: '#10B981',
                        accent: '#F59E0B',
                        neutral: '#1F2937',
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .card-shadow {
                box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
            }
            .btn-hover {
                @apply transition-all duration-300 hover:shadow-lg transform hover:-translate-y-1;
            }
        }
    </style>
</head>
<body class="bg-gray-50 min-h-screen flex items-center justify-center">
    <div class="bg-white rounded-xl p-6 w-full max-w-md mx-4 card-shadow">
        <div class="flex justify-between items-center mb-4">
            <h2 class="text-xl font-bold text-neutral">管理员登录</h2>
        </div>
        <form id="admin-login-form">
            <div class="mb-4">
                <label for="admin-username" class="block text-sm font-medium text-gray-700 mb-1">管理员账号</label>
                <input type="text" id="admin-username" name="username" placeholder="请输入管理员账号"
                    class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary/50">
            </div>
            <div class="mb-6">
                <label for="admin-password" class="block text-sm font-medium text-gray-700 mb-1">密码</label>
                <input type="password" id="admin-password" name="password" placeholder="请输入密码"
                    class="w-full px-4 py-2 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-primary/50">
            </div>
            <div class="flex justify-end space-x-3">
                <button type="button" id="cancel-admin-login-btn" class="px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors">取消</button>
                <button type="submit" class="px-4 py-2 bg-primary text-white rounded-lg btn-hover">登录</button>
            </div>
        </form>
    </div>

    <script>
        const adminLoginForm = document.getElementById('admin-login-form');
        const cancelAdminLoginBtn = document.getElementById('cancel-admin-login-btn');

        // 取消按钮事件
        cancelAdminLoginBtn.addEventListener('click', function () {
            window.location.href = 'index.html'; // 假设取消后返回首页
        });

        // 管理员登录表单提交
        adminLoginForm.addEventListener('submit', async function (e) {
            e.preventDefault();

            const username = document.getElementById('admin-username').value;
            const password = document.getElementById('admin-password').value;

            try {
                // 显示加载状态
                const submitBtn = this.querySelector('button[type="submit"]');
                const originalText = submitBtn.innerHTML;
                submitBtn.disabled = true;
                submitBtn.innerHTML = '<i class="fa fa-spinner fa-spin mr-2"></i>登录中...';

                const API_BASE_URL = 'http://localhost:5000/api';
                // 发送请求
                const response = await fetch(`${API_BASE_URL}/admin/login`, {
                    method: 'POST',
                    credentials: 'include',  // 关键修改：包含cookie
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        username,
                        password
                    })
                });

                if (response.ok) {
                    const data = await response.json();
                    if (data.admin) {
                        window.location.href = 'index.html'; // 登录成功返回首页
                    }
                } else {
                    const errorData = await response.json();
                    throw new Error(errorData.error || '登录失败，请重试');
                }
            } catch (error) {
                alert(error.message);
            } finally {
                // 恢复按钮状态
                const submitBtn = adminLoginForm.querySelector('button[type="submit"]');
                submitBtn.disabled = false;
                submitBtn.innerHTML = originalText;
            }
        });
    </script>
</body>
</html>